const path = require('path')
//自动生成 文件打包引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
//压缩和抽离css 
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const terserPlugin = require('terser-webpack-plugin')

//toml yaml json5 使用，json是默认可处理的
const toml = require('toml');
const yaml = require('yamljs');
const json5 = require('json5');
module.exports = (env)=>{
    console.log(env)
    return{
        //关闭性能检测
        performance: {
            hints: false
        },
        //配置多入口文件
        entry:{
            //! 第二种打包方式多个入口文件
            // index:{
            //     import: './src/index.js',
            //     dependOn:'shared',
            // },
            // another:{
            //     import: './src/another-module.js',
            //     dependOn:'shared',
            // },
            // shared:'lodash'
            index:'./src/index.js',
            // another:'./src/another-module.js'
        },
    
        output:{
            filename:'script/[name].[contenthash].js',
            path:path.resolve(__dirname,'./dist'),
            clean:true,
            assetModuleFilename:'images/[contenthash][ext][query]',
            publicPath:'http://ww.baidu.com'
        },
        //!生产环境
        // mode: 'development',
        mode: env.production ? 'production' : 'development',
        //!用来配置打包模式
        devtool: 'inline-source-map',
        
        plugins: [
            // 实例化 html-webpack-plugin 插件
            new HtmlWebpackPlugin({
                favicon: './src/favicon.ico',
                title: 'myApp',
                template: './index.html', // 打包生成的文件的模板
                filename: 'app.html', // 打包生成的文件名称。默认为index.html
                // 设置所有资源文件注入模板的位置。可以设置的值
                //true|'head'|'body'|false，默认值为 true
                inject: 'body',
            }),
    
            //抽离合并css
            new MiniCssExtractPlugin({
                filename: 'styles/[contenthash].css'
            }),
        ],
    
        //配置webpack-dev-server
        devServer:{
            static:'./dist'
        },
    
        // 配置资源文件
        module: {
            rules: [
                {
                    test: /\.(png|jfif)/,
                    type: 'asset/resource',
                    generator:{ //!配置文件输出路径及其文件名，优先级高于output配置中的配置
                        filename: 'images/[contenthash][ext][query]'
                    }},
                {
                    test:/\.jpg/,
                    type: 'asset/inline',},
                {
                    test:/\.txt/,
                    type: 'asset/source',},
                {
                    test:/\.jpeg/,
                    type: 'asset',
                    parser: { //!当文件小于2000kb 就通过inline方式打包，否则就通过resource方式编码打包
                        dataUrlCondition:{
                            maxSize: 2000 * 1024
                        }
                    }},
                //! loader 的使用
                //lamb 加载css
                 {
                   test:/\.(css|less)$/,
                   use:[MiniCssExtractPlugin.loader, 'css-loader','less-loader'],//todo .css 文件先通过css-loader精选预处理，之后啊通过style-loader进行处理
                },
                //lamb 加载fonts 字体
                {
                    test:/\.(woff|woff2|eot|ttf|otf)$/,
                    type: 'asset/resource',
                },
                //lamb CSV XMl文件的加载
                {
                    test: /\.(csv|tsv)$/i,
                    use: ['csv-loader'],
                },
                {
                    test: /\.xml$/i,
                    use: ['xml-loader'],
                },
    
                //lamb toml ，yaml json5 使用
                {
                    test: /\.toml$/i,
                    type: 'json',
                    parser: {
                    parse: toml.parse,
                    },
                },
                {
                    test: /\.yaml$/i,
                    type: 'json',
                    parser: {
                        parse: yaml.parse,
                    },
                },
                {
                    test: /\.json5$/i,
                    type: 'json',
                    parser: {
                        parse: json5.parse,
                    },
                },
    
                //babel-loader
                {
                    test: /\.js$/,
                    exclude:/node_modules/,
                    use:{
                        loader:'babel-loader',
                        options:{
                            presets:['@babel/preset-env'],
                            plugins:[
                                [
                                    '@babel/plugin-transform-runtime'
                                ]
                            ]
                        }
                    }
                },
                
            ]
        },
    
        //! 优化配置
        optimization: {
            //压缩css 代码
            minimizer: [
                new CssMinimizerPlugin(),
                //压缩js代买
                new terserPlugin()
            ],
            //! 第二种打包方式优化js打包
            splitChunks: {
                cacheGroups:{
                    vendor:{
                        test:/[\\/]node_modules[\\/]/,
                        name:'vendors',
                        chunks: 'all',
                    }
                }
            },
                
        },
            
        
    }
}